<template>
  <!-- <div> -->

  <div class="learn">
    <h3>直播分析</h3>
    <div class="right">
      <div class="block">
        <span class="demonstration">统计日期</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          start-placeholder="Start Date"
          end-placeholder="End Date"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        />
      </div>
      <span>今日</span>
      <span>昨日</span>
      <span>最近7天</span>
      <span>最近30天</span>
    </div>
  </div>
  <div class="echart">
    <div id="main" style="width: 1200px; height: 400px; margin: auto"></div>
  </div>

  <div class="LiveData">
    <p>直播数据</p>
    <el-table
      :data="tableData"
      v-for="(item, index) in LiveData"
      :key="index"
      style="width: 100%"
    >
      <el-table-column prop="liveinfo" label="直播信息" width="180" />
      <el-table-column prop="LiveRoomViews" label="直播间浏览量" width="120" />
      <el-table-column prop="visitor" label="直播间访客数" width="120" />
      <el-table-column
        prop="Number-of-viewers"
        label="累计观看人次"
        width="120"
      />
      <el-table-column
        prop="Accumulated number of viewers"
        label="累计观看人数"
        width="120"
      />
      <el-table-column
        prop="Average viewing time"
        label="平均观看时长"
        width="120"
      />
      <el-table-column
        prop="Maximum number of online users"
        label="最高在线人数"
        width="120"
      />
      <!-- <el-table-column prop="address" label="Address" /> -->
    </el-table>
  </div>
</template>

<script setup>



//1.导入echarts
import * as echarts from "echarts";

onMounted(() => {
  //2.实例化echarts
  var myChart = echarts.init(document.getElementById("main"));

  //3.请求数据

  //4.绘图
  myChart.setOption({
    title: {
      //标题的设置
      text: "ECharts 入门示例",
      left: "center",
    },
    legend: {
      //图例的设置
      top: 30,
    },
    xAxis: {
      data: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ],
    },
    yAxis: { type: "value" },
    series: [
      //数据系列
      {
        data: [120, 200, 150, 80, 70, 110, 130, 200, 180, 150, 199, 220, 142],
        type: "bar",
        color: "rgba(60, 143, 60)",
      },
    ],
  });
});
</script>

<style>
#id {
  width: 1000px;
  height: 600px;
}
.learn {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.right span {
  margin-left: 14px;
}
.demonstration {
  margin-right: 7px;
}
.LiveData {
  width: 1000px;
  margin: auto;
  border: 0.5px rgba(200, 199, 199, 0.416) solid;
  border-radius: 10px;
}
.LiveData p {
  padding-left: 20px;
  margin-top: 20px;
}
.el-table {
  padding: 30px;
}
</style>